<template>
  <view class="honenew">
    <view
      class="search-content ss-flex ss-col-center ss-row-between"
      @tap="click"
      :style="[
        {
          borderRadius: radius + 'px',
          background: elBackground,
          height: height + 'px',
          width: width,
          marginTop:lei=='4'?'10px':''
        },
      ]"
      :class="[{ 'border-content': navbar }]"
    >
      <view class="ss-flex ss-col-center" v-if="navbar">
        <view class="search-icon _icon-search ss-m-l-10" :style="[{ color: props.iconColor }]"></view>
        <view class="search-input ss-flex-1 ss-line-1" :style="[{ color: fontColor, width: width }]">
          {{ placeholder }}
        </view>
      </view>
      <view class="souview" :class="lei !=4?'feihome':''" @click="headsou">
        <!-- <uni-search-bar
          v-if="!navbar"
          class="ss-flex-1"
          style="padding: 0;"
          :radius="data.borderRadius"
          :placeholder="data.placeholder"
          cancelButton="none"
          clearButton="none"
          @confirm="onSearch"
          v-model="state.searchVal"
        /> -->
      <!-- <button
        class="button"
        style='right:-8px'
      @tap="onSearch2"
      >
        搜索
      </button> -->
      <image
        class="item-icon"
        src="/static/sousuo.png"
        mode=""
      ></image> 
      <text class="souguan">搜索关键词</text>

      </view>
     
      
    <view class="kefu" v-if="lei==4">
      <button open-type="contact" class="btn">

      </button>
      <view class="keview">
        <image src="/static/kefutwo.png" mode="" class="keicon" />
        <text>客服</text>
      </view>
    </view>
      <view class="keyword-link ss-flex">
        <view v-for="(item, index) in data.keywords" :key="index">
          <view
            class="ss-m-r-16"
            :style="[{ color: item.color }]"
            @tap.stop="sheep.$router.go('/pages/goods/list', { keyword: item.text })"
            >{{ item.text }}</view
          >
        </view>
      </view>

      <view v-if="data.keywords && data.keywords.length && navbar" class="ss-flex">
        <button
          class="ss-reset-button keyword-btn"
          v-for="(item, index) in data.keywords"
          :key="index"
          :style="[{ color: item.color, marginRight: '10rpx' }]"
        >
          {{ item.text }}
        </button>
      </view>
    </view>

    <view class="stiview" v-if="lei==4&&state.homelist">
      <scroll-view scroll-x class="stitem"> 
        <view class="ci" v-for="(item,index) in state.homelist" :key="index" @click="getsoulist(item.keyword)">{{item.keyword}}</view>
      </scroll-view>
    </view>
  </view>
  
</template>

<script setup>
  /**
   * 基础组件 - 搜索栏
   *
   * @property {String} elBackground 			- 输入框背景色
   * @property {String} iconColor 			- 图标颜色
   * @property {String} fontColor 		  	- 字体颜色
   * @property {Number} placeholder 			- 默认placeholder
   * @property {Number} topRadius 			- 组件上圆角
   * @property {Number} bottomRadius 			- 组件下圆角
   *
   * @slot keywords							- 关键字
   * @event {Function} click 					- 点击组件时触发
   */

  import { computed, reactive } from 'vue';
  import sheep from '@/sheep';

  // 组件数据
  const state = reactive({
    searchVal: '',
    homelist:[]
  });

  // 事件页面
  const emits = defineEmits(['click']);

  // 接收参数
  const props = defineProps({
    data: {
      type: Object,
      default: () => ({}),
    },
    // 输入框背景色
    elBackground: {
      type: String,
      default: '',
    },
    height: {
      type: Number,
      default: 36,
    },
	
    // 图标颜色
    iconColor: {
      type: String,
      default: '#b0b3bf',
    },
    // 字体颜色
    fontColor: {
      type: String,
      default: '#b0b3bf',
    },
    // placeholder
    placeholder: {
      type: String,
      default: '这是一个搜索框',
    },
    radius: {
      type: Number,
      default: 10,
    },
    width: {
      type: String,
      default: '100%',
    },
    navbar: {
      type: Boolean,
      default: true,
    },
    lei:{
      type: String,
      default: '0',
    }
  });

  // 点击
  const click = () => {
    emits('click');
  };

  async function onSearch2() {
	// console.log(emits.data)
  console.log(state.searchVal)
  console.log(props.lei) 
  if(props.lei == 3){
    emits('sclick',state.searchVal);
  }else{
    sheep.$router.go('/pages/goods/list', { keyword: state.searchVal });
  }
     
  }
  function onSearch(e) {

    // sheep.$helper.toast(props.lei);
    if (e.value) {
      if(props.lei == 1){
        // console.log(e.value)
        emits('sclick',e.value);
        // sheep.$router.go('/pages/goods/list', { keyword: e.value });
      }else{
        sheep.$router.go('/pages/goods/list', { keyword: e.value });
      }
      
    }
   
  }
  async function getKeywods(){
    const res = await sheep.$api.goods.getKeywods({
      
    });
    state.homelist = res.data
    // console.log("热搜词")
    // console.log(res)
  }
  getKeywods();
  function getsou(item){ 
    sheep.$router.go('/pages/goods/search', { keyword: item });
  }
  function getsoulist(keyword){
    if(keyword == ''){
      sheep.$helper.toast('搜索内容不能为空');
      return;
    }
    sheep.$router.go('/pages/goods/list', { keyword: keyword,leitype:'1' })
  }
  function headsou(){
    sheep.$router.go('/pages/goods/search')
  }
</script>

<style lang="scss" scoped>
  .border-content {
    border: 2rpx solid #eee;
  }
  .search-content {
    flex: 1;
    // width: 90%;
    // height: 80rpx;
    position: relative;
    // margin-top: 20rpx;
    .search-icon {
      font-size: 38rpx;
      margin-right: 20rpx;
    }
    .keyword-link {
      position: absolute;
      right: 16rpx;
      top: 18rpx;
    }

    .search-input {
      font-size: 28rpx;
    }
	
	.button{
		width: 60px;
	    height: 60rpx;
	    border-radius: 40rpx;
	    font-size: 24rpx;

		background-color: var(--ui-BG-Main)!important;
    color: var(--ui-BG-Main-TC)!important;
      box-shadow: var(--ui-Main-box-shadow)!important;
        position: relative;
        border: 0rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        text-align: center;
        text-decoration: none;
        white-space: nowrap;
        vertical-align: baseline;
        transform: translate(0);
        // position: absolute;
        // right: 100rpx;
        z-index: 100;
	}
  }
  .kefu {
  // width: 100rpx;
  position: absolute;
  // height: 100%;
  // top: 65vh;
  right: 18rpx;
  // margin-right: 10rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  // width: 65rpx;

  .keicon {
    width: 40rpx;
    height: 40rpx;
  }

  .keview {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text {
      // color: #333;
      color: #fff;
      // color: rgba(252, 20, 8, 1);
      font-size: 23rpx;
      font-weight: 500;
      display: inline-block;
      margin-top: 3rpx;
    }
  }

  // /deep/button:after {
  //   border: none;
  // }
  // .uni-searchbar__box{
  //   // icon图标靠左
  //   // justify-content: flex-start;
  //   padding-right: 75px;
  // }

}
.uni-searchbar__box {
  width: 90%;
}
.souview{
    display: flex;
    align-items: center;
    flex-direction: row;
    background-color: #f8f8f8;
    // background-color: rgb(255, 255, 255);
    width: 80%; 
    // flex: 1;
    border-radius: 1.5625rem;
    margin-left: 3%;
    /* margin: 0 25px; */
    padding: 0 10px;
    height: 36px;
}
.feihome{
  // flex: 1;
  width: 86%;
}
.honenew{
  display: flex;
  flex-direction: column;
}
.stiview{
  display: flex;
  position: relative; 
  padding:  20rpx 30rpx 0rpx;
  .stitem{
    white-space: nowrap;
    position: relative;
    .ci{
      display: inline-block;
      padding: 4rpx 20rpx;
      border-radius: 25rpx;
      background-color: #fff;
      color: #666;
      font-size: 28rpx;
      font-weight: 400;
      margin-right: 20rpx;
    }
  }
}

</style>

<style>
.btn {
  position: absolute;
  background-color: transparent;
  width: 100%;
  height: 100%;
  z-index: 1;
  left: 0;
  border: none !important;
}

.kefu button:after {
  border: none;
}
/* .uni-searchbar {
  padding: 0;
} */

/* .movable-area {
  height: 100vh;
  width: 750rpx;
  top: 0;
  position: fixed;
  pointer-events: none;

}

.movable-view {
  width: 100rpx;
  height: 100rpx;
  pointer-events: auto;

  
}
.index {
    width: 50rpx;
    height: 50rpx;
    border-radius: 50%;
    background-color: #0a98ff;
    font-size: 16rpx;
    color: #fff;
    line-height: 50rpx;
    text-align: center;
  } */
  .item-icon{
    width: 32rpx;
    height: 32rpx;
    margin-right: 20rpx;
  }
  .souguan{
    color: #666;
    font-size: 28rpx;
    font-weight: 400;
  }
</style>